<template>
  <div>
    <input type="text" placeholder="请输入关键字" v-model="keyword"/>
    <input type="button" value="查询" @click="btnSearch()" />
    <input type="button" value="新增" @click="btnAdd()" />
  </div>
  <form>
    <table class="box">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>简介</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in bookList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.bookName }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.about }}</td>
          <td>
            <input type="button" value="修改" @click="btnEdit(item.id)" />
          </td>
          <td>
            <input type="button" value="删除" @click="btnDel(item.id)" />
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAll, delBook } from '@/api/bookApi'
import { useRouter, } from 'vue-router'

let bookList = ref([])
let keyword = ref("")

let router = useRouter()


//--------------------查询开始
async function btnSearch() {
    // console.log('查找');
    let trimKeyword = keyword.value.trim();
    let res = await getAll(trimKeyword);
    // 先移除响应式数据books中所有数据,再添加查找返回的数据
    bookList.value.splice(0);
    bookList.value = res.data
}
//--------------------查询结束

//--------------------删除功能开始

function btnDel(id) {
  if (confirm('确定删除吗？')) {
    // 后端操作
    delBook(id)

    // console.log('bookList',bookList.value);

    // 假设后端数据操作成功，这里也需要移除页面上对数据，以更改列表渲染
    let idx = bookList.value.findIndex((item) => item.id == id)

    bookList.value.splice(idx, 1)
  }
}

//--------------------删除功能结束

//-------------------新增开始
function btnAdd() {
  router.push('/bookAdd')
}

//-------------------新增结束

//-------------------修改开始

function btnEdit(id) {
  router.push(`/bookEdit/${id}`)
}

//-------------------修改结束


//--------------------生命周期函数开始
onMounted(async () => {
  let res = await getAll()
  bookList.value = res.data
})
//--------------------生命周期函数结束
</script>

<style>
.box tr {
  text-align: center;
}
</style>
